<template>
  <v-header @add-item="addItem"></v-header>
  <div>正在进行</div>
  <List :list="list" :checked="false" @change-status="changeStatus" @del-item="delItem"></List>
  <div>已经完成</div>
  <List :list="list" :checked="true" @change-status="changeStatus" @del-item="delItem"></List>
</template>

<script>
import { ref } from 'vue'
import List from './components/list'
import header from '@/components/header'

export default {
  name: 'App',
  components: {
    List,
    'v-header': header
  },
  setup () {
    const list = ref([])
    const addItem = (e) => {
      list.value.push({
        id: list.value.length,
        title: e.title.value,
        isCheck: false
      }
      )
    }
    const changeStatus = (e) => {
      const id = e.id
      list.value.forEach(item => {
        if (item.id === id) {
          item.isCheck = !item.isCheck
        }
      })
    }
    const delItem = (e) => {
      const id = e.id
      const index = list.value.findIndex(item => {
        return item.id === id
      })
      list.value.splice(index, 1)
    }
    return {
      list,
      addItem,
      changeStatus,
      delItem
    }
  }
}
</script>

<style>
  body {
    background-color: #cccccc;
  }
</style>
